<script>
import {defineComponent} from 'vue'
import QuestionItem from "@/views/act/components/QuestionItem.vue";

export default defineComponent({
  name: "QNList",
  components: {QuestionItem},
  props: {
    user: Object,
    qn: Array,
    show: {
      type: Boolean,
      default: false
    },
    apply: {
      type: Boolean,
      default: false
    },
    sta: {
      type: Boolean,
      default: false
    }
  }
})
</script>

<template>
  <div class="qn-list-container-div">
    <div style="margin-top: 5px"></div>
    <div class="separator-div"/>
    <div class="qn-list-head-div">
      活动问卷
    </div>
<!--    填写问卷-->
<!--    <van-form v-if="apply" @submit="onSubmit">-->
<!--      <div v-for="(item, index) in qn">-->
<!--        <QuestionItem-->
<!--          :q="item"-->
<!--          apply-->
<!--          />-->
<!--      </div>-->
<!--      <van-button-->
<!--          round-->
<!--          block-->
<!--          type="primary"-->
<!--          native-type="submit"-->
<!--      >-->
<!--        报名活动-->
<!--      </van-button>-->
<!--    </van-form>-->
    
<!--    展示问卷-->
    <div style="display: flex;flex-direction: column">
      <div v-for="(item, index) in qn">
        <QuestionItem
            :index="index+1"
            :q="item"
            :show="show"
            :apply="apply"
            :sta="sta"
            @sta="$emit('sta',item.qId)"
        />
        <div class="separator-line"/>
      </div>
    </div>
    
  </div>

</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";


.qn-list-container-div {
  display: flex;
  flex-direction: column;
  >.qn-list-head-div{
    text-align: center;
    font-size: 24px;
    color: darkblue;
    padding: 3px;
  }
}
</style>